<template>
    <div class='page-box'>
        <div class="page-left">
            <!--  -->
            <div class="button-item-box" :class="{'active-item': activeId == 2}" @click="onAdd(2)">
                <div class="button-item add-item" v-if="activeId !=2">
                    网址库
                </div>
                <div class="flex-a-center active-add" v-else>
                    <img class="add-icon-h" src="@/assets/img/web-icon-h.png" alt="">
                    网址库
                </div>
            </div>
            <div class="button-item-box" :class="{'active-item': activeId == 3}" @click="onAdd(3)">
                <div class="button-item setting-btn" v-if="activeId !=3">
                    抓取配置
                </div>
                <div class="flex-a-center active-add" v-else>
                    <img class="add-icon-h" src="@/assets/img/get-setting-h.png" alt="">
                    抓取配置
                </div>
            </div>
            <div class="button-item-box" v-if="activeId == 2">
                <div class="button-item del-item" @click="onDel">
                    删除
                </div>
            </div>
            <div class="tab-item">
                <div class="item-title" :class="{'active-tab': activeId == 1}" @click="onList">
                    分 类
                </div>
                <div class="item-desc" v-for="(tItem, index) in categoryList" :key="index" :class="{'active-desc': sensitive_cate_id == tItem.id}" @click="onType(tItem)">
                    {{tItem.cate_name}}
                </div>
            </div>
        </div>
        <div class="page-right">
            <div class="table-box">
                <!-- 详情 -->
                <template v-if="activeId == 4 && infoDetail">
                    <Detail v-model="infoDetail" />
                </template>
                <template v-else-if="activeId == 5 && webStoreItemDetail">
                    <WebStoreEdit @updatePage="updatePage" v-model="webStoreItemDetail" />
                </template>
                <!-- 抓取配置 -->
                <template v-else-if="activeId == 3">
                    <Option @onCancel="activeId = 1" />
                </template>
                <!-- 网址库 -->
                <template v-else-if="activeId == 2">
                    <webStore ref="webStore" @onDelList="onDelList" @onEdit="onWebStoreEdit"></webStore>
                </template>
                <template v-else>
                    <div class="top-btn">
                        <div class="btn" :class="{'active-btn': sendParams.date_type == 'all'}" @click="changeTab('day')">
                            当日预警
                        </div>
                        <div class="btn" :class="{'active-btn': sendParams.date_type == 'day' }" @click="changeTab('all')" style="margin-left: 20px">
                            所有预警信息
                        </div>
                    </div>
                    <div class="tag-box">
                      <div class="tag-row flex-a-center">
                            <div class="tag tag-left flex-j-between">
                                <span>敏</span><span>感</span><span>等</span><span>级：</span>
                            </div>
                            <div class="tag" :class="{'activeTag': sendParams.level == null}" @click="onMinTag(null)">不限</div>
                            <div class="tag" v-for="mItem in minganList" :key="mItem.id" @click="onMinTag(mItem.id)" :class="{'activeTag': sendParams.level == mItem.id}">
                                {{mItem.name}}
                            </div>
                        </div>
                        <div class="tag-row flex-a-center" style="margin-top: 10px">
                            <div class="tag tag-left flex-j-between">
                                <span>属</span><span>地</span><span>网</span><span>站</span><span>分</span><span>类：</span>
                            </div>
                            <div class="tag" :class="{'activeTag': sendParams.filing_type == null}" @click="onTag(null)">不限</div>
                            <div class="tag" v-for="wItem in webTypes" :key="wItem.id" @click="onTag(wItem.id)" :class="{'activeTag': sendParams.filing_type == wItem.id}">
                                {{wItem.cate_name}}
                            </div>
                        </div>
                    </div>
                    <div style="height: 400px">
                        <Table @on-cell-click="onCellClick" stripe :columns="table.columns" :data="table.data">
                            <div slot="main" slot-scope="{row}">
                                <a>{{row.main}}</a>
                            </div>
                            <div slot="word" slot-scope="{row}">
                                <a>{{row.word}}</a>
                            </div>
                            <div slot="action" slot-scope="{row}">
                                <a @click="onEdit(row)">
                                    编辑
                                </a>
                            </div>
                            <div slot="word_level" slot-scope="{row}" :style="{'color': ['#E86D70','#F5916F', '#F6B573','#EAD481','#B3D895'][row.word_level - 1] }">
                                {{row.word_level | getWordName}}
                            </div>
                            <div slot="created_at" slot-scope="{row}">
                                {{row.created_at | toDateString}}
                            </div>
                        </Table>
                    </div>
                    <Pagination class="pageination-box" style="margin-top: 20px" :pageInfo="pageInfo" @change="handleChange"></Pagination>
                </template>

            </div>
        </div>
    </div>
</template>

<script>
import webStore from './components/web-store.vue'
import Option from './components/option.vue'
import Detail from './components/detail.vue'
import WebStoreEdit from './components/web-store-edit.vue'
import Pagination from '@/components/pagination'
import {
  allApi
} from '@/api/allApi';
import moment from 'moment'
export default {
  components: { WebStoreEdit, webStore, Pagination, Option, Detail },
  filters: {
    toDateString(date) {
      return moment(date * 1000).format('YYYY-MM-DD hh:mm')
    },
    getWordName(index = 1) {
      return ['一级', '二级', '三级', '四级', '五级'][index - 1]
    }
  },
  data() {
    //这里存放数据
    return {
      minganList:[
        {
          name: '一级敏感',
          id: 1
        },
        {
          name: '二级敏感',
          id: 2
        },
        {
          name: '三级敏感',
          id: 3
        },
        {
          name: '四级敏感',
          id: 4
        }
      ],
      webStoreItemDetail: null, // 网址库编辑详情
      infoDetail: null, // 详情
      onDelWebStoreList: [], //要删除的网址库列表
      categoryList: [],
      webTypes: [],
      sensitive_cate_id: null, // 敏感词id
      nowDay: true, // 是否为今日
      activeId: 1,
      pageInfo: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      table: {
        columns: [
          // {
          //   type: 'selection',
          //   width: 55,
          //   align: 'center'
          // },
          {
            title: '名称',
            slot: 'main'
          },
          // {
          //   title: '取证信息',
          //   key: 'website_domain'
          // },
          {
            title: '涉及敏感词',
            width: 120,
            slot: 'word'
          },
          {
            title: '正确表述',
            key: 'right_word'
          },
          {
            title: '违规分类',
            key: 'category'
          },
          {
            title: '敏感词等级',
            slot: 'word_level'
          },
          {
            title: '取证时间',
            slot: 'created_at'
          }
        ],
        data: []
      },
      itemData: null, // 编辑时候字段
      selectList: [], // 选择的list
      sendParams: {
        level: null,// 敏感等级  1 2  3 4
        date_type: 'all',//查询时间: day 当天， all 所有 ； 默认all
        filing_type: null, // 网站分类id
        sensitive_cate_name: '',  // 敏感词分类名称， 记得是分类名称
        page: 1,
        word_level: null, // 级别
        id: null
      }
    };
  },
  mounted() {
    this.$store.dispatch('setActiveTab', 3)
    if (this.$route.query.date_type) {
      this.sendParams.date_type = this.$route.query.date_type
    }
    // from 首页 携带的 预警信息id
    if (this.$route.query.warningInfoItemId) {
      this.sendParams.id = this.$route.query.warningInfoItemId
    }
    // 级别筛选
    if (this.$route.query.word_level) {
      this.sendParams.word_level = this.$route.query.word_level
    }
    // 左侧分类筛选
    if (this.$route.query.cate_name) {
      this.activeId = null
      this.sensitive_cate_id = this.$route.query.cate_id
      this.sendParams.sensitive_cate_name = this.$route.query.cate_name
    }
    this.websiteCategory()
    this.fetchData()
  },
  //方法集合
  methods: {
    // 更新页面
    updatePage() {

    },
    // 网址库编辑
    onWebStoreEdit(row) {
      this.activeId = 5
      this.webStoreItemDetail = row
    },
    // 点击某一行
    onCellClick(e) {
      this.infoDetail = e
      this.activeId = 4
    },
    changeTab(val) {
      this.sendParams.id = null // 点击任何按钮清空
      this.sendParams.date_type = val
      this.sendParams.page = 1
      this.earlyWarningList()
    },
    // 删除网址库
    onDelList(e) {
      this.onDelWebStoreList = e
    },
    // 点击分类
    onList() {
      this.sendParams.id = null
      this.sendParams.sensitive_cate_name = null
      this.sensitive_cate_id = null
      this.toList()
    },
    // 点击敏感等级
    onMinTag(id){
      this.sendParams.level = id
      this.sendParams.page = 1
      this.earlyWarningList()
    },
    // 点击分类
    onTag(tagId) {
      this.sendParams.filing_type = tagId
      this.sendParams.page = 1
      this.earlyWarningList()
    },
    // 获取网站分类
    async websiteCategory() {
      this.$Spin.show();
      try {
        const res = await allApi.websiteCategory()
        this.webTypes = res.data.rows
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide();
    },
    // 点击左侧分类
    onType(item) {
      this.sendParams.id = null
      this.sensitive_cate_id = item.id
      this.sendParams.sensitive_cate_name = item.cate_name
      this.activeId = null
      this.fetchData()
    },
    // 获取数据
    fetchData() {
      this.sensitiveCategory()
      this.earlyWarningList()
    },
    // 编辑
    onEdit(row) {
      this.activeId = 2
      this.itemData = row
    },
    // 改变页面
    handleChange(e) {
      this.sendParams.page = e.page;
      this.sendParams.pageNum = e.pageNum;
      this.earlyWarningList();
    },
    // 切换为列表
    toList() {
      this.activeId = 1
      this.earlyWarningList()
    },
    // 获取今日预警列表
    async earlyWarningList() {
      this.$Spin.show();
      try {
        const res = await allApi.earlyWarningList(this.sendParams)
        this.table.data = res.data.rows
        this.pageInfo.pageTotal = res.data.total
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide();
    },
    // 敏感词列表
    async sensitiveWords() {
      this.$Spin.show();
      try {
        const res = await allApi.sensitiveWords()
        // this.list = res.data 
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide();
    },
    // 敏感词分类
    async sensitiveCategory() {
      this.$Spin.show();
      try {
        const res = await allApi.sensitiveCategory()
        this.categoryList = res.data.rows
        // 获取敏感词list
        this.sensitiveWords()
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide();
    },
    // 删除
    async onDel() {
      // 判断是否为 网址库页面
      if (this.activeId == 2) {
        if (this.onDelWebStoreList.length == 0) {
          this.$Message.warning('请选中数据')
          return
        }
        try {
          this.$Spin.show()
          const idArray = this.onDelWebStoreList.map((mItem) => {
            return mItem.id
          })
          const params = { ids: idArray.join(',') }
          await allApi.websiteLibDel(params)
          this.$Message.success('删除成功')
          this.$refs.webStore.websiteLib()
        } catch (error) {
          console.log(error);
        }
        this.$Spin.hide()
        return
      }
      // if (this.selectList.length == 0) {
      //   this.$Message.warning('请选中数据')
      //   try {
      //     this.$Spin.show()
      //     const idArray = this.onDelWebStoreList.map((mItem) => {
      //       return mItem.id
      //     })
      //     const params = { ids: idArray.join(',') }
      //     await allApi.websiteLibDel(params)
      //     this.$Message.success('删除成功')
      //     this.fetchData()
      //   } catch (error) {
      //     console.log(error);
      //   }
      //   this.$Spin.hide()
      // }
    },
    // 新增
    onAdd(val) {
      this.activeId = val
    },
    onItem(val) {
      this.activeId = val
    }
  },
}
</script>
<style lang='less' scoped>
.page-box {
  display: flex;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  .page-left {
    width: 210px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 33px;
    cursor: pointer;
    .tab-item {
      padding-top: 24px;
      width: 100%;
      color: #fff;
      text-align: left;
      .item-title {
        font-size: 18px;
        font-weight: bold;
        padding-left: 33px;
      }
      .active-tab {
        background: #fff;
        height: 38px;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        padding-left: 33px;
        color: #0064ef;
        line-height: 38px;
      }
      .item-desc {
        margin-top: 16px;
        padding-left: 33px;
      }
      .active-desc {
        font-weight: bold;
        background: #fff;
        height: 38px;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        padding-left: 33px;
        color: #0064ef;
        line-height: 38px;
      }
      .active-desc {
        font-weight: bold;
      }
    }
    .button-item-box {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 24px;
      padding-left: 33px;
      .button-item {
        width: 84px;
        height: 22px;
        border-radius: 10px;
        font-size: 18px;
        color: #fff;
        line-height: 1.4;
      }
      .add-icon-h {
        width: 22px;
        height: 22px;
        margin-right: 10px;
      }
      .add-item {
        background: url("../../assets/img/get-icon.png") top center no-repeat;
        background-size: 100% 100%;
        padding-left: 10px;
        width: 112px;
      }
      .active-add {
        color: #0064ef;
        font-size: 18px;
        width: 100%;
      }
      .setting-btn {
        background: url("../../assets/img/setting.png") top center no-repeat;
        background-size: 100% 100%;
        padding-left: 10px;
        width: 112px;
      }
      .del-item {
        background: url("../../assets/img/del.png") top center no-repeat;
        background-size: 100% 100%;
        padding-left: 10px;
      }
    }
    .active-item {
      background: #fff;
      height: 38px;
      border-top-left-radius: 18px;
      border-bottom-left-radius: 18px;
      line-height: 30px;
      position: relative;
      .button-item {
        background: transparent;
        color: #0064ef;
      }
    }
  }
  .page-right {
    width: 100%;
    .table-box {
      height: 78vh;
      padding: 20px 80px;
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
      background: #ffffff;
      .top-btn {
        display: flex;
        color: #0064ef;
        font-size: 14px;
        font-weight: bold;
        padding-bottom: 10px;
        .btn {
          background: rgba(49, 105, 251, 0.4);
          padding: 2px 12px;
          border-radius: 16px;
          cursor: pointer;
        }
        .active-btn {
          background: #c9c9c9;
          color: #fff;
        }
      }
      .tag-box {
        padding-bottom: 20px;
        .tag-row {
          color: #727171;
          font-size: 14px;
          .tag-left {
            width: 112px;
          }
          .tag {
            cursor: pointer;
            margin-right: 10px;
            &:first-child {
              margin-right: 0;
            }
          }
          .activeTag {
            color: #0064ef;
          }
        }
      }
      .pageination-box {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5%;
        margin: 0 auto;
      }
    }
  }
}
/deep/ .ivu-table th {
  background-color: #0064ef;
  color: #fff;
  font-weight: normal;
}
/deep/ .ivu-table-stripe .ivu-table-body tr:nth-child(n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(n) td {
  background-color: #edf0ff;
}
/deep/ .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
.ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
  background-color: #d4e1fe;
}
/deep/ .ivu-table:before {
  content: none;
}
</style>